<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iframe消息通信测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f5f5f5;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .test-panel {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 6px;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    input,
    select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }

    button {
      background: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
    }

    button:hover {
      background: #0056b3;
    }

    .iframe-container {
      border: 2px solid #007bff;
      border-radius: 6px;
      margin-top: 20px;
      height: 600px;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    .log {
      background: #f8f9fa;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 15px;
      margin-top: 20px;
      max-height: 200px;
      overflow-y: auto;
    }

    .log-item {
      margin-bottom: 8px;
      padding: 5px;
      background: white;
      border-radius: 3px;
    }

    .success {
      color: #28a745;
    }

    .error {
      color: #dc3545;
    }

    .info {
      color: #17a2b8;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>🚀 iframe消息通信测试页面</h1>
    <p>这个页面模拟外层项目，用于测试向iframe发送消息的功能</p>

    <div class="test-panel">
      <h3>📝 测试参数配置</h3>
      <div class="form-group">
        <label for="token">Token:</label>
        <input type="text" id="token" value="test-token-12345" placeholder="输入测试token">
      </div>

      <div class="form-group">
        <label for="roles">角色 (JSON数组):</label>
        <input type="text" id="roles" value='["user", "admin"]' placeholder='["user", "admin"]'>
      </div>

      <div class="form-group">
        <label for="parentId">父级ID:</label>
        <input type="text" id="parentId" value="parent-123" placeholder="输入父级ID">
      </div>

      <div class="form-group">
        <label for="parentName">父级名称:</label>
        <input type="text" id="parentName" value="测试项目" placeholder="输入父级名称">
      </div>

      <div class="form-group">
        <label for="messageType">消息类型:</label>
        <select id="messageType">
          <option value="normal">正常消息</option>
          <option value="error">错误数据</option>
          <option value="empty">空数据</option>
        </select>
      </div>

      <button onclick="sendMessage()">📤 发送消息到iframe</button>
      <button onclick="sendTestMessage()">🧪 发送测试消息</button>
      <button onclick="clearLog()">🗑️ 清空日志</button>
    </div>

    <div class="iframe-container">
      <h3>📱 iframe内容 (你的Vue项目)</h3>
      <iframe id="testIframe" src="http://localhost:80"></iframe>
    </div>

    <div class="log">
      <h3>📋 操作日志</h3>
      <div id="logContent"></div>
    </div>
  </div>

  <script>
    function log(message, type = 'info') {
      const logContent = document.getElementById('logContent');
      const timestamp = new Date().toLocaleTimeString();
      const logItem = document.createElement('div');
      logItem.className = `log-item ${type}`;
      logItem.innerHTML = `[${timestamp}] ${message}`;
      logContent.appendChild(logItem);
      logContent.scrollTop = logContent.scrollHeight;
    }

    function clearLog() {
      document.getElementById('logContent').innerHTML = '';
      log('日志已清空', 'info');
    }

    function getTestData() {
      const messageType = document.getElementById('messageType').value;

      switch (messageType) {
        case 'error':
          return 'invalid-json-data';
        case 'empty':
          return '';
        default:
          return {
            token: document.getElementById('token').value,
            roles: JSON.parse(document.getElementById('roles').value),
            parentId: document.getElementById('parentId').value,
            parentName: document.getElementById('parentName').value
          };
      }
    }

    function sendMessage() {
      try {
        const iframe = document.getElementById('testIframe');
        const data = getTestData();

        if (typeof data === 'object') {
          const encodedData = encodeURIComponent(JSON.stringify(data));
          iframe.contentWindow.postMessage(encodedData, '*');

          log(`✅ 成功发送消息: ${JSON.stringify(data)}`, 'success');
          log(`📤 编码后数据: ${encodedData}`, 'info');
        } else {
          iframe.contentWindow.postMessage(data, '*');
          log(`⚠️ 发送特殊数据: ${data}`, 'error');
        }
      } catch (error) {
        log(`❌ 发送消息失败: ${error.message}`, 'error');
      }
    }

    function sendTestMessage() {
      console.log('发送消息');

      const testData = {
        token: "test-token-" + Date.now(),
      };

      const iframe = document.getElementById('testIframe');
      const encodedData = encodeURIComponent(JSON.stringify(testData));
      iframe.contentWindow.postMessage(encodedData, '*');

      log(`🧪 发送测试消息: ${JSON.stringify(testData)}`, 'success');
    }

    // 监听来自iframe的消息（如果需要双向通信）
    window.addEventListener('message', function (event) {
      if (event.source === document.getElementById('testIframe').contentWindow) {
        log(`📥 收到iframe回复: ${JSON.stringify(event.data)}`, 'info');
      }
    });

    // 页面加载完成后的初始化
    window.addEventListener('load', function () {
      log('🚀 测试页面加载完成', 'success');
      log('💡 请确保你的Vue项目在 http://localhost:80 运行', 'info');
      log('💡 点击"发送消息到iframe"按钮测试消息通信', 'info');
    });

    // 检查iframe是否加载完成
    document.getElementById('testIframe').addEventListener('load', function () {
      log('✅ iframe加载完成', 'success');
    });
  </script>
</body>

</html>